<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        #projectTitle .projectTitle_text{margin: 21px 0 0 22px;color: #333;}
        #projectTitle .projectTitle_text h2{font-size: 24px;line-height: 25px;}
        #projectTitle .projectTitle_text span{color: #999;}
        #projectTitle .projectTitle_text p{font-size: 14px;line-height: 30px;margin: 10px 0 13px 0;}
        #projectTitle .projectTitle_text i{font-size: 22px;color: #ccc;margin-left: 30px;}
        #projectTitle .projectTitle_img img{width: 200px;height: 149px;margin: 20px 20px 0 0;}

        #projectList .projectList_btns{height: 54px;background: #f1f9fc;border-top: 1px solid #e0eaef;
            border-bottom: 1px solid #dbe7ed;}
        #projectList .projectList_btns ul{margin: 14px 0 0 20px;}
        #projectList .projectList_btns li{float: left;width: 108px;height: 39px;border: 1px solid #dbe7ed;
            border-bottom: none;background: #fbfeff;color: #666;text-align: center;line-height: 39px;
            margin-right: 12px;border-radius: 5px 5px 0 0;cursor: pointer;}
        #projectList .projectList_btns li.active{color: white;background: #018ffb;}

        #projectList .projectList_cons{margin: 20px;}
        #projectList .projectList_cons>div{display: none;}
        #projectList .projectList_cons>div.show{display: block;}
        #projectList .zi_upload1,#projectList .zi_upload2{width: 110px;height: 32px;line-height: 32px;
        text-align: center;font-size: 14px;color: white;cursor: pointer;border-radius: 5px;}
        #projectList .zi_upload1 input,#projectList .zi_upload2 input{display: none;}
        #projectList .zi_upload1 label,#projectList .zi_upload2 label{cursor: pointer;}
        #projectList .zi_upload1{background: #5fd15c;font-size: 12px;}
        #projectList .zi_upload2{background: #34C1da;margin-left: 20px;}
        #projectList .iconshangchuan{font-size: 12px;}
        #projectList .zi_search{width: 210px;height: 30px;border: 1px solid #dbe7ed;border-radius: 5px;overflow: hidden;}
        #projectList .zi_search input{border: none;height: 100%;width: 177px;color: #999;font-size: 14px;
        text-indent: 9px;}
        #projectList .zi_search button{width: 32px;height: 32px;border: none;border-left: 1px #dbe7ed solid;
        background-image: linear-gradient(#FCFDFD,#F1f9fc);cursor: pointer;}
        #projectList .zi_search i{font-size: 18px;font-weight: bold;color: #a1c6d4;}

        #projectList .zl_table{clear: both;width: 100%;border: 1px solid #dbe7ed;font-size: 12px;
        border-collapse: collapse;position: relative;top: 20px;}
        #projectList .zl_table tr{height: 32px;border-bottom: 1px #e0eaef solid;}
        #projectList .zl_table tr:hover{background: #f1f9fc;}
        #projectList .zl_table th{border-right: 1px solid #dbe7ed;color: #666;font-weight: normal;
        text-align: left;text-indent: 12px;}
        #projectList .zl_table th:first-child{text-align: center;text-indent: 0;}
        #projectList .zl_table td{text-indent: 12px;}
        #projectList .zl_table .icon-download-1-copy{color: #3da2f0;}
        #projectList .zl_table .icon-trash{color: #d94141;}

        #projectList .zl_footer{height: 70px;border: 1px #dbe7ed solid;border-top: none;margin-top: 20px;
        overflow: hidden;margin-top: 20px;}
        #projectList .zl_remove,#projectList .zl_download{width: 78px;height: 24px;border: 1px #c9e4f1 solid;
        border-radius: 3px;background-image: linear-gradient(#f7fcff,#e7f4fa);margin-top: 18px;
        font-size: 12px;color: #1b84ba;cursor: pointer;}
        #projectList .zl_remove{margin-right: 15px;margin-left: 22px;}
        #projectList .zl_page{line-height: 24px;margin: 22px 18px 0 0;font-size: 0;}
        #projectList .zl_page a{border: 1px solid #e6e6e6;padding: 6px 9px;font-size: 12px;margin-left: 10px;}
        #projectList .zl_page a.active{border: 1px solid #3797e0;background: #42adff;color: white;}
    </style>
</head>
<body>
    <header id="header">
        <hgroup class="header_logo l">
            <h1 class="l">
                <img src="./img/1.png" alt="">
            </h1>
            <h2 class="r">正达建筑内部管理平台</h2>
        </hgroup>
        <ul class="header_nav r">
            <li>
                <i class="iconfont icon-user-filling"></i>欢迎您，武剑 管理员
            </li>
            <li>
                <i class="iconfont icon-bianji"></i><a href="#">修改密码</a>
            </li>
            <li>
                <i class="iconfont icon-shouye"></i><a href="#">公司官网</a>
            </li>
            <li>
                <i class="iconfont icon-huaban19"></i><a href="#">退出</a>
            </li>
        </ul>
    </header>
    <aside id="menu" class="l">
        <ul>
            <li class="active">
                <a href="#">
                    <i class="iconfont icon-loukongguanli"></i>
                    <p>项目管理</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-yonghuxinxi"></i>
                    <p>用户管理</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-sou"></i>
                    <p>系统设置</p>
                </a>
            </li>
        </ul>
    </aside>
    <main id="main">
        <section class="main_container">
            <section id="projectTitle" class="clear">
                <div class="projectTitle_text l">
                    <h2>青田高湾绿园一期<i class="iconfont icon-bianji"></i></h2>
                    <p>
                        项目编号:<span>CN0000507</span><br>
                        项目类型:<span>在建工程</span><br>
                        项目负责人:<span>美美</span><br>
                        手机号码:<span>12324324324</span><br>
                    </p>
                </div>
                <div class="projectTitle_img r">
                    <img src="./img/2.png" alt="">
                </div>
            </section>
            <section id="projectList">
                <div class="projectList_btns">
                    <ul>
                        <li>视频监控</li>
                        <li>考勤管理</li>
                        <li>安全巡查</li>
                        <li class="active">资料管理</li>
                    </ul>
                </div>
                <div class="projectList_cons">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="show">
                        <div class="zi_upload1 l">
                            <label>
                                <input type="file">
                                <i class="iconfont icon-shangchuan"></i>&nbsp 单个上传
                            </label>
                        </div>
                        <div class="zi_upload2 l">
                            <label>
                                <input type="file" multiple>
                                <i class="iconfont icon-shangchuan"></i>&nbsp 批量上传
                            </label>
                        </div>
                        <div class="zi_search r">
                            <input type="text" placeholder="请输入关键字"><button><i class="iconfont icon-sou"></i></button>
                        </div>
                        <table class="zl_table">
                            <thead>
                                <tr>
                                    <th width="49"><input type="checkbox"></th>
                                    <th>文档名称</th>
                                    <th width="167">文档大小</th>
                                    <th width="148">上传者</th>
                                    <th width="168">上传时间</th>
                                    <th width="81">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈某人</td>
                                    <td>2016-03-14</td>
                                    <td><i class="iconfont icon-download-1-copy"></i> &nbsp; &nbsp;<i class="iconfont icon-trash"></i></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈某人</td>
                                    <td>2016-03-14</td>
                                    <td><i class="iconfont icon-download-1-copy"></i> &nbsp; &nbsp;<i class="iconfont icon-trash"></i></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈某人</td>
                                    <td>2016-03-14</td>
                                    <td><i class="iconfont icon-download-1-copy"></i> &nbsp; &nbsp;<i class="iconfont icon-trash"></i></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈某人</td>
                                    <td>2016-03-14</td>
                                    <td><i class="iconfont icon-download-1-copy"></i> &nbsp; &nbsp;<i class="iconfont icon-trash"></i></td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈某人</td>
                                    <td>2016-03-14</td>
                                    <td><i class="iconfont icon-download-1-copy"></i> &nbsp; &nbsp;<i class="iconfont icon-trash"></i></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="zl_footer">
                            <button class="zl_remove">批量删除</button>
                            <button class="zl_download">批量下载</button>
                            <div class="zl_page r">
                                <a href="#">共12条</a>
                                <a href="#">首页</a>
                                <a href="#">上一页</a>
                                <a href="#">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                                <a href="#">下一页</a>
                                <a href="#" class="active">尾页</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </main>
    <footer id="footer">
        Copyright @ 2009-2016 
    </footer>
</body>
</html>